<template>
	<view>
		<image class="BGImage1" src="/static/login/bg.png" mode=""></image>

		<view class="title flex-row-center">
			960陪伴达人
		</view>
		<view class="text">
			<text>
				{{text}}
			</text>
		</view>
		<view class="phoneView">
			<input type="number" v-model="username" placeholder="输入手机号" maxlength="11"
				placeholder-style="color:#FFFFFF">
		</view>
		<view class="phoneView1 flex-row-center">
			<input class="flex1" type="number" v-model="sms_code" placeholder="验证码" maxlength="6"
				placeholder-style="color:#FFFFFF">
			<view @click="sendMsg" class="button">
				{{ msg }}
			</view>
		</view>

		<view class="xzView flex-row-flex-start">
			<image @click="xzClik()" v-if="!isXz" class="icon" src="/static/login/wxz.png" mode=""></image>
			<image @click="xzClik()" v-if="isXz" class="icon" src="/static/login/xz.png" mode=""></image>
			是否同意 <text @tap="to('/pages/index/cms?id=tech_privacy')">《隐私政策》</text>和<text
				@tap="to('/pages/index/cms?id=tech_instructions')">《用户协议》</text>
		</view>

		<view @click="userLogin" class="loginButton flex-row-center">
			登录
		</view>
		<!-- 	<view class="" style="height: 600rpx;">
			
		</view> -->
	</view>
</template>

<script>
	var clear;
	import {
		login,
		userLogin,
		getOpenid,
		sms
	} from './api.js'; //引入需要的api
	import {
		index
	} from "../index/api.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		onLoad() {

		},
		data() {
			return {
				isXz: false,
				text: '商务接待、旅游出行、休闲娱乐、。\n高端私人助理，一对一贴心服务。\n伴你度过愉快的每一天，期待你的到来!',
				imgUrl: this.$store.state.imgUrl,
				userInfo: null,
				username: '',
				sms_code: '',
				msg: '获取验证码'
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			xzClik() {
				this.isXz = !this.isXz
			},
			// 获取验证码
			sendMsg() {
				if (this.readonly) {
					return;
				}
				if (!this.username) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				let moble = {
					phone: this.username,
					type: 0
				}


				sms(moble).then((res) => {
					this.getCodeState();
				})
			},
			//验证码按钮文字状态
			getCodeState() {
				clear && clearInterval(clear);
				const _this = this;
				this.readonly = true;
				this.msg = '60S';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.msg = s + 'S';
					if (s <= 0) {
						clearInterval(clear);
						_this.msg = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			// 登录
			userLogin() {
				if (!this.isXz) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					});
					return;
				}
				if (this.check.username(this.username) == false) {
					return
				}
				if (this.check.sms_code(this.sms_code) == false) {
					return
				}
				let data = {
					phone: this.username,
					sms_code: this.sms_code

				}
				/* console.log(data) */
				login(data).then(res => {
					console.log(res.data);
					uni.setStorageSync('token', res.data);
					uni.setStorageSync('arr', 0)
					console.log(res.data);
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 100)
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: '授权中'
				})
				let _this = this
				let userInfo = {}
				uni.getUserProfile({
					desc: '登录', // 这个参数是必须的
					success: async res => {
						console.log(res)
						userInfo.nickname = res.userInfo.nickName
						userInfo.avatar = res.userInfo.avatarUrl
						//登录获取openid
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(loginRes)
								let code = loginRes.code
								getOpenid({
									code
								}).then(res => {
									uni.setStorage({
										key: 'openid',
										data: res.msg.openid,
									});
									uni.setStorage({
										key: 'session_key',
										data: res.msg.session_key,
									});
									userInfo.openid = res.msg.openid
									userInfo.unionid = res.msg.unionid
									login(userInfo).then(res2 => {
										if (res2.code == 1) {
											_this.$store.commit("changeToken", res2
												.data)
											uni.setStorage({
												key: 'token',
												data: res2.data
											});
											_this.getMyIndexData()
											uni.switchTab({
												url: "/pages/index/index"
											})
										} else {
											uni.showToast({
												title: '登录失败，请重新登录',
												icon: 'none'
											})
										}
									})
								})
							}
						});
					},
					fail() {
						uni.showToast({
							title: '登录失败，请重新登录',
							icon: 'none'
						})
					}
				})
			},

			// 获取个人信息
			getMyIndexData() {
				let token = uni.getStorageSync("token")
				this.$db.http('my.Index', token).then(res => {
					if (res.code == 200) {
						uni.setStorage({
							key: "info",
							data: res.data.info
						})
					}
				})
			},

			to(e) {
				uni.navigateTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="less">
	.BGImage1 {
		position: fixed;
		width: 100%;
		height: 100%;
		bottom: 0;
		top: 0;
		left: 0;
		z-index: -1;
	}

	page {
		padding-top: 124rpx;
		background-color: #FFFFFF00;

	}

	.title {
		// margin-top: 24rpx;
		font-size: 60rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.text {
		margin-left: 54rpx;
		margin-top: 12rpx;
		margin-right: 34rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #FFFFFF;
	}

	.phoneView {
		margin: 26rpx 56rpx;
		padding-left: 44rpx;
		height: 106rpx;
		background: #FFFFFF4D;
		border-radius: 70rpx 70rpx 70rpx 70rpx;

		// opacity: 0.3;
		input {
			width: 100%;
			height: 100%;
			color: #FFFFFF;
		}
	}

	.phoneView1 {
		margin: 26rpx 56rpx;
		margin-top: 48rpx;
		padding-left: 44rpx;
		height: 106rpx;
		background: #FFFFFF4D;
		border-radius: 70rpx 70rpx 70rpx 70rpx;

		// opacity: 0.3;
		input {
			// width: 100%;
			height: 100%;
			color: #FFFFFF;
		}
	}

	.button {
		width: 200rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #FFFFFF;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.xzView {
		margin-left: 82rpx;
		margin-top: 4rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
	}

	.xyTitle {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.loginButton {
		margin: 40rpx 56rpx;
		height: 106rpx;
		background: #26C376;
		border-radius: 70rpx 70rpx 70rpx 70rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>